<template>

  <div class="table1_container">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
      <button class="report-top-button" @click="back">返回上级页面</button>
      <div style="text-align: center; margin: 10px 0;">
        <div style="display: inline-flex; gap: 20px;">
          <!-- 未完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;"
            ></div>
            <span>未完成</span>
          </div>

          <!-- 已完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;"
            ></div>
            <span>已完成</span>
          </div>

          <!-- 不合格重采 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;"
            ></div>
            <span>不合格重采</span>
          </div>
        </div>
      </div>
      <h1>检验批质量验收记录</h1>
      <span class="table1_reportId" style="text-align: right; display: block">{{ previewData.streamNumber }}</span>
      <table class="table1_top_table">
        <tr>
          <th>单位（子单位）<br>工程名</th>
          <td>{{ previewData.subprojectName }}</td>
          <th>分部（子分部）工程名称</th>
          <td>{{ previewData.fenbuProjectName }}</td>
          <th>分项工程名称</th>
          <td id="table1_top_table_last_col">{{ previewData.fenxiangName }}</td>
        </tr>
        <tr>
          <th>施工单位</th>
          <td>{{ previewData.shigongCompanyName }}</td>
          <th>项目负责人</th>
          <td>{{ previewData.shigongDirector }}</td>
          <th>检验批容量</th>
          <td id="table1_top_table_last_col">{{ previewData.taskInspectBatchVolumeSources }}</td>
        </tr>
        <tr>
          <th>分包单位</th>
          <td>{{ previewData.fenbaoCompany }}</td>
          <th>分包单位<br>项目负责人</th>
          <td>{{ previewData.fenbaoDirector }}</td>
          <th>检验批部位</th>
          <td id="table1_top_table_last_col">{{ previewData.inspectPart }}</td>
        </tr>
      </table>
      <table class="table1_middle_table">
        <tr>
          <th>施工依据</th>
          <td style="width: 32%">{{ previewData.shigongRule }}</td>
          <th>验收依据</th>
          <td style="width: 36%">{{ previewData.yanshouRule }}</td>
        </tr>
      </table>
      <table class="table1_middle_bottom_table">
        <tr>
          <th id="table1_mb_1">验收项目</th>
          <th id="table1_mb_2">设计要求及规定</th>
          <th id="table1_mb_3">样本总数</th>
          <th id="table1_mb_4">最小/实际抽样数量</th>
          <th id="table1_mb_5">检查记录</th>
          <th id="table1_mb_6">检查<br>结果</th>
        </tr>
      </table>
      <div class="table1_bottom1" style="position: relative; height: auto">
        <div style=" vertical-align: top; border-right: 1px black solid;text-align: center;" class="table1_bottom1_div">
          <div class="table1_bottom1_div_div">主控项目</div>
        </div>
        <table class="table1_bottom_table" style="vertical-align: top;" ref="data">
          <tr v-for="(item, index) in previewData.generalItems" :key="index" style="width: 100%" :class="{
          'row-unfinished': item.isFinished === 0,
          'row-finished': item.isFinished === 1,
          'row-failed': item.isFinished === 2
        }"
          >    <!--  这里用到了动态属性绑定，绑定了class的值，我需要通过css选择器来动态选中  -->
            <td id="table1_bottom_1" style="text-align: right; padding-right: 1%;"><span>{{ index + 1 }}</span></td>
            <td id="table1_bottom_2">{{ item.itemName }}</td>
            <td id="table1_bottom_3">{{ item.ruleStandard }}</td>
            <td id="table1_bottom_4">{{ item.sampleAmount }}</td>
            <td id="table1_bottom_5">{{ item.minAndCollectedAmount }}</td>
            <td id="table1_bottom_6">{{ item.checkRecord }}</td>
            <td id="table1_bottom_7">{{ item.passRate }}</td>
          </tr>
        </table>
      </div>
      <div class="table1_bottom1" style="position: relative; height: auto">
        <div style=" vertical-align: top; border-right: 1px black solid;text-align: center;" class="table1_bottom1_div">
          <div class="table1_bottom1_div_div">一般项目</div>
        </div>
        <table class="table1_bottom_table" style="vertical-align: top;" ref="data">
          <tr v-for="(item, index) in previewData.mainItems" :key="index" style="width: 100%" :class="{
          'row-unfinished': item.isFinished === 0,
          'row-finished': item.isFinished === 1,
          'row-failed': item.isFinished === 2
        }"
          >
            <td id="table1_bottom_1" style="text-align: right; padding-right: 1%;"><span>{{ index + 1 }}</span></td>
            <td id="table1_bottom_2" style="padding-right: 5px;"><span style="padding-right: 5px;">{{
                item.itemName
              }}</span></td>
            <td id="table1_bottom_3">{{ item.ruleStandard }}</td>
            <td id="table1_bottom_4">{{ item.sampleAmount }}</td>
            <td id="table1_bottom_5">{{ item.minAndCollectedAmount }}</td>
            <td id="table1_bottom_6">{{ item.checkRecord }}</td>
            <td id="table1_bottom_7">{{ item.passRate }}</td>
          </tr>
        </table>
      </div>
      <div class="table1_footer1" style="width: 90%; margin: 0 auto; border: 1px black solid; display: flex">
        <div class="table1_footer1_data1"
             style=" width: 32%; height: 200px;display: flex; justify-content: center; align-items: center; border-right: 1px black solid;"
        >

          <span>施工单位<br>检查结果</span>
        </div>
        <div class="table1__footer1_data2"
             style="width: 68%; display: flex; justify-content: end; align-items: flex-end"
        >
          <div style=" height:140px; width: 50%; display: flex; flex-direction: column">
            <div style="height: 33%; width: 50%;display: flex; justify-content: flex-end">
              <span>专业工长：</span>
            </div>
            <div style="height: 33%; width: 50%; display: flex;justify-content: flex-end">
              <span>项目专业质量检查员：</span>
            </div>
            <div style="height: 33%; width: 100%;display: flex; justify-content: flex-end">
              <span style="margin-right: 10px">{{ previewData.finishDate[0] }} 年 {{
                  previewData.finishDate[1]
                }} 月 {{ previewData.finishDate[2] }} 日</span>
            </div>
          </div>
        </div>
      </div>
      <div class="table1_footer2" style="width: 90%; margin: 0 auto; border: 1px black solid; display: flex">
        <div class="table1_footer2_data1"
             style=" width: 32%; height: 200px;display: flex; justify-content: center; align-items: center; border-right: 1px black solid;"
        >
          <span>监理单位<br>验收结论</span>
        </div>
        <div class="table1__footer2_data2"
             style="width: 68%; display: flex; justify-content: end; align-items: flex-end;"
        >
          <div style=" height:140px; width: 50%; display: flex; flex-direction: column">
            <div style="height: 33%; width: 50%;display: flex; justify-content: flex-end">
              <!--这个空白div拉来凑数的-->
            </div>
            <div style="height: 33%; width: 50%; display: flex;justify-content: flex-end">
              <span>专业监理工程师：</span>
            </div>
            <div style="height: 33%; width: 100%;display: flex; justify-content: flex-end">
              <span style="margin-right: 25px">年</span>
              <span style="margin-right: 25px">月</span>
              <span style="margin-right: 10px">日</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchInpsectCheckPreview } from '@/api/statementManage/yanShou/statementManage'

/*
 *    这个报表真麻烦！！！
 *
 */

export default {
  name: 'NoZoomPage',
  data() {
    return {
      localStorageId: '',
      reportData: {},
      previewData: {},
      originalViewport: ''
    }
  },
  async mounted() {  //钩子函数

    // //保存原始viewport数据
    // const viewportMeta = document.querySelector('meta[name=viewport]');
    // this.originalViewport = viewportMeta.content;
    //
    // viewportMeta.content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
    //
    // window.addEventListener("keydown", this.preventZoom);
    // window.addEventListener("wheel", this.preventZoom, { passive: false });  //监听键盘事件

    //从localstorage中拿数据
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.reportData = JSON.parse(data)
        console.log(this.reportData)
      }
    }

    //赶紧从接口拿数据
    try {
      const { result } = await searchInpsectCheckPreview(this.reportData.taskId)
      console.log(result)
      this.previewData = result
      console.log(this.previewData)
      this.$message.success('报表已生成！')
    } catch (err) {
      this.$message.error('报表生成失败！')
    }

  },
  beforeDestroy() { //离开页面要做的事

    window.removeEventListener('keydown', this.preventZoom)
    window.removeEventListener('wheel', this.preventZoom)   //取消监听

    const viewportMeta = document.querySelector('meta[name=viewport]')
    if (viewportMeta) {
      viewportMeta.content = this.originalViewport
    }

    //那就是清除localstorage！！！
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') //还原，因为这是个全局样式

  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') //设置对比色
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    preventZoom(e) {
      // // 阻止 Ctrl + 滚轮
      // if (e.ctrlKey || e.metaKey) {
      //   e.preventDefault();
      // }
      // // 阻止 Ctrl + +/-
      // if ((e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '-' || e.key === '=')) {
      //   e.preventDefault();
      // }
    }
  }
}
</script>

<style>

/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
  background-color: #ffffff; /* 未完成 - 白色或默认色 */
}

.row-finished {
  background-color: #e6f7e6; /* 已完成 - 浅绿色 */
}

.row-failed {
  background-color: #ffebeb; /* 不合格重采 - 浅红色 */
}

.table1_container {
  width: 80%;
  background: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 20px;
  font-size: 1.1rem;
}

.table1_dataShower {
  width: 80%;
  background: white;
  margin: 0 auto;
  border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6); /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

.table1_reportId {
  margin-right: 10%;
}

/*上方表格样式*/
.table1_top_table, .table1_middle_table, .table1_middle_bottom_table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

/*前三行表头的样式*/
.table1_top_table tr th, .table1_middle_table tr th {
  width: 16%;
  height: 50px;
  border: 1px solid black;
}

.table1_top_table tr td, .table1_middle_table tr th {
  width: 16%;
  height: 50px;
  border: 1px solid black;
  word-wrap: break-word; /* 允许长单词换行 */
  overflow-wrap: break-word; /* 更现代的换行属性 */
}

#table1_top_table_last_col {
  width: 20%;
  min-height: 50px;
}

.table1_middle_table, .table1_middle_table th {
  border-bottom: none !important;
  border-top: none !important;
}

/*单独设置中下方表格每行的样式*/
.table1_middle_bottom_table tr th {
  border-bottom: none;
}

#table1_mb_1, #table1_mb_2, #table1_mb_3, #table1_mb_4, #table1_mb_5, #table1_mb_6 {
  border: 1px black solid;
}

#table1_mb_1 {
  width: 32%;
}

#table1_mb_2 {
  width: 14%;
}

#table1_mb_3 {
  width: 4%;
}

#table1_mb_4 {
  width: 14%;
}

#table1_mb_5 {
  width: 30%;
}

#table1_mb_6 {
  width: 6%;
}

.table1_bottom_table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/*主数据展示部分的单元格高度设置*/
.table1_bottom_table tr td {
  height: 100px;
}

.table1_bottom1 {
  width: 90%;
  margin: 0 auto;

}

.table1_bottom1 div {
  width: 3%;
}

#table1_bottom_1 {
  width: 6%;
}

#table1_bottom_2 {
  width: 26%;
}

#table1_bottom_3 {
  width: 14%;
}

#table1_bottom_4 {
  width: 4%;
}

#table1_bottom_5 {
  width: 14%;
}

#table1_bottom_6 {
  width: 30%;
}

#table1_bottom_7 {
  width: 6%;
}

.table1_bottom1_div {
  position: absolute;
  top: 0;
  left: 0;
  width: 3%;
  height: 100%;
  z-index: 10;
  background: white;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-bottom: 1px solid black;
}

.table1_bottom1_div_div {
  position: absolute;
  writing-mode: vertical-rl; /* 竖排文字 */
  text-orientation: mixed; /* 保持中文方向 */
  left: calc(50% + 0.5em); /* 水平居中起点 */
  top: 50%; /* 垂直居中起点 */
  transform: translate(-50%, -50%); /* 修正自身宽高偏移 */
  width: 1px; /* 最小宽度（关键！） */
  height: max-content; /* 高度由内容决定 */
  line-height: 1; /* 单行文字行高 */
  text-align: center; /* 文字在竖排方向居中 */
  white-space: nowrap; /* 禁止换行 */
}

/*设置主控项目表格样式*/
.table1_bottom_table tr td {
  border: 1px black solid;
  word-wrap: break-word; /* 允许长单词换行 */
  overflow-wrap: break-word; /* 更现代的换行属性 */
}

th {
  box-sizing: border-box !important;
}
</style>
